<template>
  <div>
    <div class="search">
      <el-row :gutter="20" class="Num1">
        <el-col :span="8"
          ><div class="grid-content type">
            地址：<el-input
              size="small"
              maxlength="18"
              style="width: 100%"
              v-model="postMessage.location"
            ></el-input></div
        ></el-col>
        <el-col :span="7"
          ><div class="grid-content number">
            事项编号：<el-input size="small" maxlength="18" v-model="postMessage.number"></el-input></div
        ></el-col>
        <el-col :span="7"
          ><div class="grid-content bg-purple">
            状态：
            <el-select v-model="postMessage.status" placeholder="所有状态" size="small" @change="choosestatus">
              <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select></div
        ></el-col>
      </el-row>
      <el-row :gutter="20" class="Num2">
        <el-col :span="8">
          <div class="block">
            时间：
            <el-date-picker
              v-model="value"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
              size="small"
              @change="getDate"
              style="width: 100%"
            >
            </el-date-picker></div
        ></el-col>
        <el-col :span="7"
          ><div class="grid-content type">
            问题类型：<el-select v-model="postMessage.typeId" placeholder="请选择" size="small">
              <el-option v-for="item in problem" :key="item.id" :label="item.typeName" :value="item.id"> </el-option>
            </el-select></div
        ></el-col>

        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-button type="primary" size="small" @click="search">搜索</el-button>
            <el-button type="success" size="small" @click="exportExcel">导出Excel</el-button>
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20" class="Num3">
        <el-col :span="7">
          人员：
          <el-select v-model="value3" placeholder="人员" size="small" @change="chooseId">
            <el-option v-for="item in optionlist" :key="item.id" :label="item.fullName" :value="item.id"> </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div class="form">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="number" label="事项编号" align="center"> </el-table-column>
        <el-table-column prop="typeName" label="问题类型" align="center" width="100"> </el-table-column>
        <el-table-column prop="date" label="上报时间" align="center"></el-table-column>
        <el-table-column prop="location" label="事件地点" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="describe" label="问题描述" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="事项状态" align="center">
          <template slot-scope="scope">
            {{ getStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="blockR">
      <el-pagination background layout="prev, pager, next" :page-count="total" @current-change="changesize">
      </el-pagination>
    </div>
    <el-drawer title="事项详情" :visible.sync="drawer" direction="rtl" :before-close="handleClose" size="55%">
      <!-- 已核实 -->
      <verify :childmessage="this.parentMessage" v-show="state == 2"></verify>
      <!-- 已办结 -->
      <Finish :childmessage="this.parentMessage" v-show="state == 4"></Finish>
      <!-- 已作废 -->
      <cancel :childmessage="this.parentMessage" v-show="state == 5"></cancel>
      <!-- 已上报 -->
      <Escalation
        :childmessage="this.parentMessage"
        v-show="state == 0 || state == 6 || state == 7 || state == 8 || state == 9"
      ></Escalation>
    </el-drawer>
  </div>
</template>
<script>
import grid from '@/mock/grid'
import Seats from '@/api/Seats'
import Grid from '@/api/Grid'
import verify from './verify/verify.vue'
import Finish from './Finish/Finish.vue'
import Escalation from './Escalation/Escalation.vue'
import cancel from './cancel/cancel.vue'
export default {
  data() {
    return {
      total: 0,
      state: '',
      parentMessage: '',
      drawer: false,
      value: '',
      value3: '',
      postMessage: {
        number: '',
        location: '',
        startTime: '',
        endTime: '',
        typeId: '',
        status: 100,
        tUserId: '',
        pageNo: 1,
        pageSize: 7,
      },
      status: '',
      option: [],
      problem: [],
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      optionlist: [],
    }
  },
  methods: {
    getselectunderling() {
      Grid.selectunderling().then(e => {
        this.optionlist = e.data
      })
    },
    getclassification() {
      Seats.classification().then(res => {
        this.problem = res.data
      })
    },
    changesize(row) {
      this.postMessage.pageNo = row
      this.getIndividual()
    },
    choosestatus(val) {
      this.postMessage.status = val
    },
    chooseId(val) {
      this.postMessage.tUserId = val
    },
    getDate(date) {
      this.value = date
      this.postMessage.startTime = this.value[0]
      this.postMessage.endTime = this.value[1]
    },
    getIndividual() {
      Grid.Individual(this.postMessage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list
          this.total = res.data.pages
        }
      })
    },
    search() {
      Grid.Individual(this.postMessage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list
          this.total = res.data.pages
        }
      })
    },
    handleClick(scope) {
      this.state = scope.status
      this.drawer = true
      this.parentMessage = scope
    },
    handleClose(done) {
      done()
    },
    getStatus(id) {
      let status = ''
      switch (id) {
        case 0:
          status = '已上报'
          break
        case 1:
          status = '待核实'
          break
        case 2:
          status = '已核实'
          break
        case 3:
          status = '退回待核实'
          break
        case 4:
          status = '已办结'
          break
        case 5:
          status = '已作废'
          break
        case 6:
          status = '已上报'
          break
        case 7:
          status = '已上报'
          break
        case 8:
          status = '已上报'
          break
        case 9:
          status = '已上报'
          break
        case 10:
          status = '退回待核实'
          break
      }
      return status
    },
    // 导出excel
    exportExcel() {
      Grid.exportexcel(this.postMessage).then(res => {
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        let elink = document.createElement('a')
        elink.download = '个人台账.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      })
    },
  },
  mounted() {
    let currentTimer = setInterval(() => {
      Grid.Individual(this.postMessage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list
          this.total = res.data.pages
        }
      })
    }, 60000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(currentTimer)
      currentTimer = null
    })
  },
  created() {
    this.postMessage.tUserId = localStorage.getItem('userId')
    this.getselectunderling()
    this.getIndividual()
    this.option = grid
    this.getclassification()
  },
  components: { verify, Finish, Escalation, cancel },
}
</script>

<style lang="scss" scoped>
@import './gird.scss';
</style>
